<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>

    .layui-upload-colse {
        position: relative;
    }

    .closeUpload {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .upImg {
        width: 80px;
        height: 80px;
    }

    .formfixed {
        position: relative;
    }

    .remove {
        position: absolute;
        top: 125%;
        right: -175px;
        transform: translateY(-50%);
        cursor: pointer;
    }


    .layui-input-block1 {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .layui-tab-title {
        height: 40px !important;
    }

    .layui-tab-content {
        height: calc(100% - 40px);
        overflow: auto;
    }

    .myremove1 {
        width: 70px;
        height: 33px;
        display: flex;
        align-items: center;
    }


    .mybutton {
        background: #fff;
        height: 150px;
        width: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #a9b7b7;
        border: 2px solid #a9b7b7;
        margin-right: 10px;
        padding: 10px;
    }

    .mybutton:hover {
        cursor: pointer;
    }

    .layui-upload-list {
        display: flex;
        flex-wrap: wrap;
    }

    .layui-form-label {
        width: 100px !important;
    }

    .myButtons:hover {
        cursor: pointer;
    }

    .myButtons {
        color: deepskyblue;
    }
</style>
<body>
<input id="userId" th:value="${id}" style="display: none">
<input id="type" th:value="${type}" style="display: none">
<div class="layui-fluid mt2" style="background-color: #f0f2f5">
    <form class="layui-form" style="height: 100%;">
        <div class="layui-form-item">
            <label class="layui-form-label" style="text-align: left;width: 116px!important" id="title1"
                   th:text="${type=='拼团'?(itemId==-1?'订单详情':'收货人信息'):(type=='课程'?'课程订单信息':'商品订单信息')}"></label>
        </div>
        <th:block th:if="${type=='拼团'}">
            <div class="layui-form-item" th:each="item,orderItem:${myData?.orderVos}" th:if="${itemId==-1}">
                <div class="layui-inline">
                    <label class="layui-form-label">订单编号</label>
                    <div class="layui-input-block layui-input-block1" th:text="${item.orderNo}">
                    </div>
                </div>
                <div class="layui-inline" style="width: calc((100% - 66px) / 5);">
                    <label class="layui-form-label">购买人姓名</label>
                    <div class="layui-input-block layui-input-block1 myButtons"
                         th:onclick="'javascript:myButtons(\''+${orderItem.index}+'\');'" th:text="${item.userName}">
                    </div>
                </div>
                <div class="layui-inline" style="width: calc((100% - 66px) / 5);">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block layui-input-block1" th:text="${item.phone}">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">下单时间</label>
                    <div class="layui-input-block layui-input-block1 myCreateTime"
                         th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}">
                    </div>
                </div>
                <div class="layui-inline" style="width: calc((100% - 66px) / 5);">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block layui-input-block1"
                         th:text="${item.orderStatus==0?'待分享':
                     (item.orderStatus==1?'待使用':
                     (item.orderStatus==2?'已使用':'已退款'))}">
                        0：待分享，1：待使用，2：已使用，3：已退款
                    </div>
                </div>
            </div>
            <div class="layui-form-item" th:if="${itemId!=-1}">
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">购买人姓名</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.orderVos[itemId].userName}">
                    </div>
                </div>
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.orderVos[itemId].phone}">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">订单编号</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.orderVos[itemId].orderNo}">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" th:if="${itemId!=-1}">
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block layui-input-block1"
                         th:text="${myData?.orderVos[itemId].orderStatus==0?'待分享':
                     (myData?.orderVos[itemId].orderStatus==1?'待使用':
                     (myData?.orderVos[itemId].orderStatus==2?'已使用':'已退款'))}">
                        (0：待分享，1：待使用，2：已取消，3：已退款
                    </div>
                </div>
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">应付</label>
                    <div class="layui-input-block layui-input-block1"
                         th:text="${myData?.orderVos[itemId].accountMoney}">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">实付</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.orderVos[itemId].shareMoney}">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" th:if="${itemId!=-1}">
                <div class="layui-inline">
                    <label class="layui-form-label">下单时间</label>
                    <div class="layui-input-block layui-input-block1"
                         th:text="${#dates.format(myData?.orderVos[itemId].createTime,'yyyy-MM-dd HH:mm:ss')}">
                    </div>
                </div>
            </div>
        </th:block>
        <th:block th:if="${type=='课程'}">
            <div class="layui-form-item">
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">收货人姓名</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.userName}">
                    </div>
                </div>
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.phone}">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">订单编号</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.orderNo}">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block layui-input-block1"
                         th:text="${myData?.status}">
                    </div>
                </div>
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">应付</label>
                    <div class="layui-input-block layui-input-block1"
                         th:text="${myData?.totalFee}">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">实付</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.shareMoney}">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">下单时间</label>
                    <div class="layui-input-block layui-input-block1"
                         th:text="${#dates.format(myData?.createrDate,'yyyy-MM-dd HH:mm:ss')}">
                    </div>
                </div>
            </div>
        </th:block>
        <th:block th:if="${type=='订单'}">
            <div class="layui-form-item">
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">购买人姓名</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.userName}">
                    </div>
                </div>
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.phone}">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">订单编号</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.orderNo}">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block layui-input-block1"
                         th:text="${myData?.orderStatus==1?'待使用':
                                   (myData?.orderStatus==2?'已使用':
                                   (myData?.orderStatus==3?'已退款':
                                   (myData?.orderStatus==4?'已过期':
                                   (''))))
                                }">
                    </div>
                </div>
                <div class="layui-inline" style="width: calc((100% - 66px) / 3);">
                    <label class="layui-form-label">应付</label>
                    <div class="layui-input-block layui-input-block1"
                         th:text="${myData?.accountMoney}">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">实付</label>
                    <div class="layui-input-block layui-input-block1" th:text="${myData?.shareMoney}">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">下单时间</label>
                    <div class="layui-input-block layui-input-block1"
                         th:text="${#dates.format(myData?.createTime,'yyyy-MM-dd HH:mm:ss')}">
                    </div>
                </div>
            </div>
        </th:block>
        <div class="layui-form-item">
            <label class="layui-form-label" style="text-align: left;"
                   th:text="${type=='拼团'?'商品信息':(type=='课程'?'课程信息':'商品信息')}"></label>
        </div>
        <th:block th:if="${type=='拼团'}">
            <div class="layui-form-item">
                <div class="layui-inline" style="width: calc((100% - 55px) / 4);text-align: center;">商品规格</div>
                <div class="layui-inline" style="width: calc((100% - 55px) / 4);text-align: center;">团购</div>
                <div class="layui-inline" style="width: calc((100% - 55px) / 4);text-align: center;">拼团</div>
                <div class="layui-inline" style="width: calc((100% - 55px) / 4);text-align: center;">商品总价</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: calc((100% - 55px) / 4);text-align: center;"
                     th:text="${myData?.orderVos[0]?.specsName}"></div>
                <div class="layui-inline" style="width: calc((100% - 55px) / 4);text-align: center;"
                     th:text="${myData?.orderVos[0]?.originalPrice}"></div>
                <div class="layui-inline" style="width: calc((100% - 55px) / 4);text-align: center;"
                     th:text="${myData?.orderVos[0]?.groupPrice}"></div>
                <div class="layui-inline" style="width: calc((100% - 55px) / 4);text-align: center;"
                     th:text="${myData?.orderVos[0]?.price}"></div>
            </div>
        </th:block>
        <th:block th:if="${type=='课程'}">
            <div class="layui-form-item">
                <div class="layui-inline" style="width: calc((100% - 55px) / 2);text-align: center;">课程名称</div>
                <div class="layui-inline" style="width: calc((100% - 55px) / 2);text-align: center;">单价</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: calc((100% - 55px) / 2);text-align: center;"
                     th:text="${myData?.coursesName}"></div>
                <div class="layui-inline" style="width: calc((100% - 55px) / 2);text-align: center;"
                     th:text="${myData?.totalFee}"></div>
            </div>
        </th:block>
        <th:block th:if="${type=='订单'}">
            <div class="layui-form-item">
                <div class="layui-inline" style="width: calc((100% - 55px) / 2);text-align: center;">商品规格</div>
                <div class="layui-inline" style="width: calc((100% - 55px) / 2);text-align: center;">单价</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: calc((100% - 55px) / 2);text-align: center;"
                     th:text="${myData?.specsName}"></div>
                <div class="layui-inline" style="width: calc((100% - 55px) / 2);text-align: center;"
                     th:text="${myData?.price}"></div>
            </div>
        </th:block>

    </form>
</div>

<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/xmSelect.js"></script>
<script>
    function myButtons(index) {
        // item = item.substr(item.indexOf('(') + 1)
        // item = item.substring(0, item.length - 1)
        // let jsitem = item.split(',')
        // let map = {}
        // jsitem.forEach(item => {
        //     map[item.split('=')[0].trim()] = item.split('=')[1] == 'null' ? null : item.split('=')[1]
        // })
        // console.log(map)
        const toIindex = layer.open({
            type: 2,
            title: '用户订单详情',
            // maxmin: true,
            shadeClose: false,
            resize: false,
            area: ['800px', '500px'],
            content: `/jzweb/jazGroupActivity/info/${$('#userId').val()}/${index}/${$('#type').val()}`,
        });
        layer.full(toIindex);

    }

</script>
</body>
</html>